// import {WholePage, WholePageContent, WholePageHeader} from "@/layout/Page";
import {useSelector} from "react-redux";

import styles from "./index.module.scss"
import {Button, Card, Form, Input, Modal, Radio, Tabs, TabsProps, Tag} from "antd";
import classNames from "classnames";
import {useEffect, useState} from "react";
import {DefinePage, PageWrapperBox} from "@/layout/Page";
import SuperAvatar from "@/components/SuperAvatar";
import {getAllAvatarBorderListUrl} from "@/api/system/avatar_border.ts";
import styled from 'styled-components';

function UserCard(props: any) {
    const {userInfo} = props
    console.log("props userInfo", props)
    return <Card
        hoverable
        style={{width: 240}}
        className={classNames(styles.userCard, "card-shadow")}>
        <div className={styles.avatar}>
            <img src={"https://api.r10086.com/樱道随机图片api接口.php?自适应图片系列=原神"}/>
        </div>
        <ul>
            <li>用户名：{userInfo.userName}</li>
            <li>手机号：{userInfo.phonenumber}</li>
            <li>邮箱：{userInfo.email}</li>
            <li>昵称：{userInfo.nickName}</li>
            <li>{userInfo.role}</li>


        </ul>
    </Card>
}


function BaseInfo() {
    const {userInfo} = useSelector((state: any) => state.user)
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue(userInfo)
    }, [form, userInfo]);

    const handleFinish = (values: any) => {
        console.log("values", values)
    }

    return <div>
        <Form form={form}
              labelCol={{span: 4}}
              onFinish={handleFinish}
        >
            <Form.Item label={"昵称"} name={"nickName"}>
                <Input placeholder="请输入用户昵称"/>
            </Form.Item>
            <Form.Item label={"用户名"}>
                <Tag>{userInfo.userName}</Tag>
            </Form.Item>
            <Form.Item label={"手机号"} name={"phonenumber"}>
                <Input placeholder="请输入邮箱"/>
            </Form.Item>
            <Form.Item label={"邮箱"} name={"email"}>
                <Input placeholder="请输入邮箱"/>
            </Form.Item>
            <Form.Item label={"性别"} name={"sex"}>
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="0">保密</Radio.Button>
                    <Radio.Button value="1">女</Radio.Button>
                    <Radio.Button value="2">男</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {/*提交按钮*/}
            <Form.Item>
                <Button htmlType="submit" type={"primary"} style={{float: "right"}}>提交</Button>
            </Form.Item>
        </Form>
    </div>
}


const Content = styled.div`
    line-height: 1.8;
    font-size: 26px;
`;

/**
 * 我的头像
 * @constructor
 */
function AvatarInfo() {
    const [borderList, setBorderList] = useState<any[]>([])
    const [open, setOpen] = useState(false)
    const [showItem, setShowItem] = useState<any>({})
    const [selectItem, setSelectItem] = useState<any>({})


    // 获取头像信息
    useEffect(() => {
        getAllAvatarBorderListUrl().then((res) => {
            setBorderList(res.data)
        })
    }, []);

    // 获取头像
    return <div className={styles.myAvatar}>
        {/*首先要支持裁剪头像*/}
        <div className={styles.showAvatar}>
            <SuperAvatar borderUrl={selectItem.url}/>
        </div>
        {/*优化就是头像边框*/}
        <div className={styles.allAvatarBorder}>
            <div className={styles.selectAvatarBorder}>
                {
                    borderList.map((item: any) => {
                        return <div key={item.id} className={styles.avatarBorderItem} onClick={() => {
                            setOpen(true)
                            setShowItem(item)
                        }}>
                            <SuperAvatar wh={120} borderUrl={item.url}/>
                            <div className={styles.avatarBorderName}>{item.title}</div>
                        </div>
                    })
                }
            </div>
        </div>

        {/*对话框，用于大图展示对应的头像边框信息*/}
        <Modal
            open={open}
            footer={
                <div className={styles.avatarBorderModalFooter} style={{}}>
                    <Button htmlType={"submit"} type={"primary"} onClick={() => {
                        setOpen(false)
                        setSelectItem(showItem)
                    }}>使用</Button>
                </div>
            }
            width={360}
            onCancel={() => {
                setOpen(false)
            }}
        >
            <div className={styles.avatarBorderModal}>
                <SuperAvatar wh={198} borderUrl={showItem.url}/>
                <Content>
                    <span>{showItem.title}</span>
                </Content>
            </div>
        </Modal>
    </div>
}


export default function () {
    const tabArray: TabsProps['items'] = [
        {
            key: "1",
            label: "首页",
            children: "首页"
        },
        {
            key: "2",
            label: "基本信息",
            children: <BaseInfo/>
        },
        {
            key: "3",
            label: "我的头像",
            children: <AvatarInfo/>
        },
    ]


    const onChange = (key: string) => {
        console.log(key);
    };

    return <PageWrapperBox>
        <Tabs defaultActiveKey="3" items={tabArray} onChange={onChange}/>
    </PageWrapperBox>
}
